<template>
    <div :class="indiviClass">
        <div class="dance-music-group">
            <swiper :banner="banner" class="swiper"></swiper>
            <h4 
                :class="
                    [`${program + 'indivi-h4'}`,
                    `${program + 'indivi-h4-' + theme}`
                    ]
                "
            >推荐歌单</h4>
            <music-list :music-list="personalized"></music-list>
            <private-content :privateList="privateContent"></private-content>
            <new-songs :music-list="musicList"></new-songs>
        </div>
    </div>
</template>
 
<script>
import { theme } from 'mixin/global/theme'
import Swiper from 'components/common/swiper/Swiper'
import MusicList from 'components/content/musiclist/Musiclist'
import privateContent from './childsComps/privateContent'
import NewSongs from './childsComps/newSongs'
import { _getBanner,_getPersonalized,_getPrivateContent,_getNewSong } from 'network/discover'
export default {
    name: "individuation",
    mixins: [theme],
    components: {
        Swiper,
        MusicList,
        privateContent,
        NewSongs
    },
    computed: {
        indiviClass() {
            return [
                `${this.program + "indivi"}`,
                `${this.program + "indivi-" + this.theme}`,
            ]
        }
    },
    data() {
        return {
            banner: null, //轮播图数据
            limit: 10, //一次获取的歌单数量
            personalized: null, //推荐歌单数据
            privateContent: null, //独家放送数据
            musicList: null, //最新音乐
        }
    },
    created() {
        this.getBanner()
        this.getMusicList()
        this.getPrivateContent()
        this.getNewSong()
    },
    methods: {
        // 轮播图数据'
        getBanner() {
            _getBanner().then(res => {
                if (res.status === 200) {
                    this.banner = res.data.banners
                }
            })
        },
        // 推荐歌单数据
        getMusicList() {
            _getPersonalized(this.limit).then(res => {
                if (res.status === 200) {
                    this.personalized = res.data.result
                }
            }) 
        },
        // 独家放送数据
        getPrivateContent() {
            _getPrivateContent().then(res => {
                if (res.status === 200) {
                    this.privateContent = res.data
                }
            })
        },
        getNewSong() {
            _getNewSong().then(res => {
                if (res.status === 200) {
                    this.musicList = res.data.result
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.dance-music-indivi{
    width: 100%;
    height: 100%;
    &-h4-dark {
         color: var(--dark-text-color);
    }
}
.dance-music-group {
    width: 1090;
}
</style>